const path = require('path')
module.exports = {
  css: {
    loaderOptions: {
      // 修改（覆盖）less中的样式变量，从而达到，自定义主题的要求
      less: {
        // 若 less-loader 版本小于 6.0，请移除 lessOptions 这一级，直接配置选项。
        // lessOptions: {
        modifyVars: {
          // 方法一： 直接覆盖变量

          // '@nav-bar-background-color': '#057cff', // 修改navbar头部样式
          // '@nav-bar-title-text-color': '#fff' // 修改navbar中的文字颜色
          // 方法二： 或者可以通过 less 文件覆盖（文件路径为绝对路径）
          // 首先创建一个样式less文件并且拼接绝对路径引入
          // vue.config.js 文件是对webpack 进行配置的
          // webpack运行在 node（后端环境）环境中，所以所有文件引入方式必须是绝对路径
          // 在 webpack 中拼接绝对路径需要用到 path 模块   并且推荐 path.resolve（）拼接路径
          hack: `true;  @import "${path.resolve(__dirname, 'src/styles/cover.less')}";`
        }
        // }
      }
    }
  }
}
